<!doctype html>
<head>
	<meta charset="utf-8">
	<title>Լաբարատոր մաս</title>
	<link href="physic.css" rel="stylesheet">
	<link href="label.css"  rel="stylesheet">
	<link href="result.css"  rel="stylesheet">
	<link href="css/start/jquery-ui-1.9.2.custom.css" rel="stylesheet">
    <link href="uniformMotion.css"  rel="stylesheet">
	<script src="js/jquery-1.8.3.js"></script>
	<script src="js/jquery-ui-1.9.2.custom.js"></script>
	<script src="js/jquery.ui.touch-punch.min.js"></script>
	<script src="canvasSpeed.js"></script>
	<script src="js/stopwatch.js"></script> 
<script>
$(document).ready(function(){ 
//init sliders	
$( "#high" ).slider({
	range: "min",
	min: 0,
	max: 50,
	value: 0,
	slide: function(event, ui) {  
		var id =$(this).attr("id");
		jQuery("#"+id+"-text").text('H='+ui.value+'m');  //alert();
		drowx(ui.value);
		$("#motion img").animate({marginLeft: ui.value*0.6+"%"}, 100);
    }
	
});
$( "#corner" ).slider({
	min: 1,
	max: 90,
	value: 45,
	range: "min",
	slide: function(event, ui) {  
		var id =$(this).attr("id");
		jQuery("#"+id+"-text").html("&alpha;="+ui.value+"&deg;");
    }
	
});
$( "#speed" ).slider({
	min: 10,
	max: 60,
	value: 55,
	range: "min",
	slide: function(event, ui) {  
		var id =$(this).attr("id");
		jQuery("#"+id+"-text").html('V<sub>0</sub>='+ui.value+' m/s');
    }	
});
// button connect
$( ".button" ).mousedown(function(){
	  var id = $(this).attr("id");
	  var idArray = id.split('-');
	  if(idArray[2]=="up"){ 
	  var val = jQuery("#"+idArray[0]).slider("value");
	  val++;
	  }
 	  if(idArray[2]=="down"){
	  var val = jQuery("#"+idArray[0]).slider("value");
	  val--; 
	  }
	  var val = parseInt(val); 
	  jQuery("#"+idArray[0]).slider("value",val);
	  switch (idArray[0]) {
	   case 'high':
		  var text='H='+$("#"+idArray[0]).slider("value")+'m'
		  break
	   case 'corner':
		  var text="&alpha;="+$("#"+idArray[0]).slider("value")+"&deg;"
		  break
	   case 'speed':
		  var text='V<sub>0</sub>='+$("#"+idArray[0]).slider("value")+' m/s'
		  break
	  }
	  jQuery("#"+idArray[0]+"-text").html(text);
	  drowx($("#"+idArray[0]).slider("value"));
	  $("#motion img").animate({marginLeft: "+="+val+"%"}, 100);
    });

$("#right").buttonset();
//result animation
        $( "#button" ).click(function() {
                $( "#effect" ).animate({
                    backgroundColor: "#aa0000",
                    color: "#fff",
                    hight: 600
                }, 1000 );
        });
        $( "#cleen" ).click(function() {
				$("#showdiv").hide();
                $( "#effect" ).animate({
                    backgroundColor: "#fff",
                    color: "#000",
                }, 1000 );
        });		
//select elements for canvas
cRange = $("#corner");
hRange = $("#high");
sRange = $("#speed");
 function updatedisplay(watch) 
 {
   document.getElementById('watchdisplay').innerHTML = watch.toString() + "." + parseInt(watch.getElapsed().milliseconds/100);
 }
 wotch = new Stopwatch(updatedisplay, 50);
});
</script>
	<style>
	.ui-slider .ui-slider-handle {
		width: 20px; 
	    height: 25px; 
	}

	/* line sizes */
	.ui-slider-horizontal {
	     height: 15px;
	}
	#button .ui-button-text,#cleen .ui-button-text{
    font-size: 25px;    
	}
	.ui-button-text {
    font-size: 15px;
    }
	/* ������������� �������� */
	.ui-slider-horizontal .ui-slider-handle {
	    top: -5px;
	    margin-left: -6px;
	}
	/* watch */
	#watchdisplay{

	font-size: 25px;
	margin-left: 30px;
	background-image:url(../images/frame.png);
	width: 195px;
	height: 120px;
	color: #FFF;
	text-align: center;
	padding-top: 20px;
	}
	h2{
	color: brown;
	margin-left: 30px;	 
	}
	</style>
</head>
<body>
<header>physic lessons</header>
<div id = "motion" ><img src="../images/car.png" width="200" height="124"></div>
<h2>ՈՒղղագիծ հավասարաչափ շարժում</h2>
<div id="right">
<!--
<span id="high-text">H=0m </span></br>
<button class="button" id="high-button-down" ><</button>&nbsp;
<span class="slider" id="high"  ></span>
<button class="button" id="high-button-up">></button>
</br>
<span id="corner-text">&alpha;=45&deg;</span></br>
<button class="button" id="corner-button-down" ><</button>&nbsp;
<span class="slider"  id="corner"></span>
<button class="button" id="corner-button-up">></button>
</br>
<span  id="speed-text" > V<sub>0</sub>=55.0m/s </span></br>
<button class="button"id="speed-button-down" ><</button>&nbsp;
<span class="slider"  id="speed"></span>
<button class="button" id="speed-button-up">></button>
</br><br/>-->


<br/>
<div class="result">
    <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Result</h3>
<div id="showdiv"><br/>	
<div id="watchdisplay">00:00:00.00</div>
</div>
</br>
</div>
</div><br/>
<button id="button" >start</button> <button id="cleen" >cleen</button><br/>
</div>
<canvas id="canvas" width="550" height="525"></canvas>
<!--
<audio autoplay>
<source src="../audio/Lab.wav" type="audio/wav">
<source src="../audio/Lab.ogg" type="audio/ogg">
<source src="../audio/Lab.mp3" type="audio/mpeg">
</audio>
-->
</div>

</body>
</html>
